<template>
    <div
        class="bind-phone-bg"
        v-if="bindPhone"
    >
        <div class="bind-phone-main">
            <div class="bind-phone-title">为保证账号安全，请绑定手机号码</div>
            <div class="phone-input-box">
                <input
                    class="phone-input"
                    type="tel"
                    placeholder="请输入手机号码"
                    v-model="userPhone"
                    @blur="goBottom"
                />
            </div>
            <div class="get-code-box">
                <div class="code-input-box">
                    <input
                        class="code-input"
                        type="number"
                        placeholder="请输入验证码"
                        v-model="userCode"
                        @blur="goBottom"
                    />
                </div>
                <div
                    class="get-code-btn"
                    v-html="getCodeTips"
                    :class="isGetCode == true?'is-get-code': ''"
                    @click="getCode"
                ></div>
            </div>
            <div class="bind-phone-ctr">
                <div
                    class="cancle"
                    @click="cancleBindPhone"
                >取消</div>
                <div
                    class="sure"
                    @click="suerBindPhone"
                >确认</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'BindPhone',
    props: ['bindPhone'],
    data() {
        return {
            userPhone: '',
            userCode: '',
            isGetCode: false,
            isSureBind: false,
            getCodeTips: '获取验证码'
        }
    },
    methods: {
        getCode() {
            if (this.isGetCode) {
                return
            }
            this.isGetCode = true
            let time = 59
            this.getCodeTips = '60秒后重新获取'
            let waitTime = window.setInterval(() => {
                if (time > 0) {
                    this.getCodeTips = time + '秒后重新获取'
                    time--
                } else {
                    this.isGetCode = false
                    this.getCodeTips = '获取验证码'
                    window.clearInterval(waitTime)
                }
            }, 1000)
            let postData = this.qs.stringify({
                act: 'getCode',
                mobile: this.userPhone
            })
            this.axios
                .post('/api/user/info/bind_mobile.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        this.commonDialog.alert('提示', '验证码发送成功')
                    } else {
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        suerBindPhone() {
            if (this.isSureBind) {
                this.commonDialog.alert('提示', '请勿重复提交')
                return
            }
            this.isSureBind = true
            let postData = this.qs.stringify({
                mobile: this.userPhone,
                code: this.userCode
            })
            this.axios
                .post('/api/user/info/bind_mobile.json', postData)
                .then(res => {
                    const data = res.data
                    if (data.status == 1) {
                        const that = this
                        this.commonDialog.alert(
                            '提示',
                            '手机号已绑定成功',
                            function() {
                                that.isSureBind = false
                                that.$emit('closeBindPhone')
                                that.axios
                                    .post('/api/user/my_info.json')
                                    .then(res => {
                                        const data = res.data
                                        if (data.status == 1) {
                                            sessionStorage.setItem(
                                                'userInfo',
                                                JSON.stringify(data.data)
                                            )
                                            that.$emit('updateUserInfo')
                                        } else {
                                            that.commonDialog.alert(
                                                '提示',
                                                data.msg
                                            )
                                        }
                                    })
                            }
                        )
                    } else {
                        this.isSureBind = false
                        this.commonDialog.alert('提示', data.msg)
                    }
                })
        },
        cancleBindPhone() {
            this.$emit('closeBindPhone')
        },
        goBottom() {
            window.scroll(0, 0)
        }
    }
}
</script>

<style lang="stylus" scoped>
.bind-phone-bg
    position fixed
    top 0
    left 0
    right 0
    bottom 0
    background-color rgba(0, 0, 0, 0.7)
    z-index 9
    display flex
    align-items center
    justify-content center
    .bind-phone-main
        width 7.6rem
        padding 0.37rem 0.55rem 0 0.55rem
        background #fff
        border-radius 6px
        overflow hidden
        .bind-phone-title
            line-height 1.48rem
            text-align center
            font-size 0.38rem
            color #333
        .phone-input-box
            display flex
            align-items center
            height 1.2rem
            padding 0 0.27rem
            background #ededed
            border-radius 3px
            .phone-input
                flex 1
                min-width 1px
                font-size 0.38rem
                color #333
                background #ededed
                border none
                outline none
        .get-code-box
            display flex
            align-items center
            justify-content space-between
            margin-top 0.27rem
            .code-input-box
                display flex
                align-items center
                width 4.12rem
                height 1.2rem
                padding 0 0.27rem
                background #ededed
                border-radius 3px
                .code-input
                    flex 1
                    min-width 1px
                    font-size 0.38rem
                    color #333
                    background #ededed
                    border none
                    outline none
            .get-code-btn
                width 2.5rem
                line-height 1.2rem
                text-align center
                background #d7463c
                font-size 0.33rem
                color #fff
                border-radius 3px
            .is-get-code
                background #dcdcdc
        .bind-phone-ctr
            display flex
            align-items center
            margin-top 0.74rem
            .cancle
                flex 1
                line-height 1.2rem
                text-align center
                font-size 0.42rem
                color #333
            .sure
                flex 1
                line-height 1.2rem
                text-align center
                font-size 0.42rem
                color #d7463c
input::-webkit-input-placeholder
    color #999
</style>
